<template>
  <view class="box">
    <view class="top tou fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <view class="title">
        <image
          class="image1"
          src="https://pic.bangbangtongcheng.com/static/back.png"
          @click="fanhui"
        />
        收益提现
      </view>
    </view>
    <view class="top tou" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view
      class="list"
      :style="'height: calc( 100vh - 88rpx - ' + statusBarHeight1 + 'px)'"
    >
      <scroll-view class="scroll-view" scroll-y>
        <view
          class="item"
          :class="item.status == 2 ? 'item1' : ''"
          v-for="(item, index) in list"
          :key="index"
          :style="'background-image:url(https://pic.bangbangtongcheng.com/81238b63d023499e9e9493b4ca7b8cc4.png)'"
        >
          <view class="nums">
            <text class="num">{{ item.price }}</text>
            <text class="unit">元</text>
          </view>
          <view class="line"></view>
          <view class="text_box">
            <view class="name">{{
              item.taskType == 1
                ? "邀请好友注册新用户获得红包"
                : "邀请好友关注公众号获得红包"
            }}</view>
            <view class="date">发起时间:{{ $Time.getTimeZY(item.createDate) }}</view>
            <view class="date">结束时间:{{ $Time.getTimeZY(item.sureTime) }}</view>
          </view>
          <view class="btn flex_center" v-if="item.status == 1" @click="show(item)"
            >去提现</view
          >
          <view class="btn flex_center" v-if="item.status == 2">已提现</view>
        </view>
        <view class="none" v-if="list.length == 0">当前暂无收益，快去邀请好友吧~</view>
      </scroll-view>
    </view>
    <view class="mask1" v-if="showActivity" @click="showActivity = false"></view>
    <view class="activity_box" v-if="showActivity">
      <!-- <image
        class="activity_image"
        src="https://pic.bangbangtongcheng.com/72554f5ccba14b569ccd863b1aa18d2d.png"
        mode="scaleToFill"
      /> -->
      <!-- <image
        class="activity_image"
        src="https://pic.bangbangtongcheng.com/c9ce722d153f4ab8a1a67fffcff04914.png"
        mode="scaleToFill"
      /> -->
      <view class="success_window">
        <view class="num_top flex_center">
          <view class="line_box line_box1">
            <view class="line"></view>
            <view class="line line1"></view>
            <view class="line"></view>
          </view>
          <view class="num_title">红包兑换码</view>
          <view class="line_box">
            <view class="line"></view>
            <view class="line line1"></view>
            <view class="line"></view>
          </view>
        </view>
        <view class="success_title">
          <view class="success_title">请将本页面截图发给客服</view></view
        >
        <view class="code flex_center">
          {{ info.exchangeCode }}
        </view>
        <view class="success_title">提现后失效</view>
        <image
          class="code_img"
          :src="image"
          mode="scaleToFill"
          :show-menu-by-longpress="true"
        />
        <view class="success_title">扫码添加官方客服微信</view>
        <view class="success_text">兑换码为唯一兑换凭证，切勿泄露于他人</view>
        <!-- <view class="success_btn flex_center" @click="reward">去提现</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif
export default {
  data() {
    return {
      statusBarHeight,
      userInfo: uni.getStorageSync("Pduser"),
      list: [],
      showActivity: false,
      info: {},
      image: "",
    };
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onLoad(options) {
    let that = this;
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
    this.getData();
  },
  onShow() {
    this.getList();
  },
  methods: {
    show(item) {
      this.info = item;
      this.showActivity = true;
    },
    getData() {
      this.$myRequest
        .get("/api/mobile/public/getTaskConfig", {
          type: 4,
        })
        .then((res) => {
          this.image = res.taskConfig.qrcode;
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    view() {
      uni.previewImage({
        urls: [this.image],
        longPressActions: {
          itemList: ["保存到相册", "识别二维码"],
          itemColor: "#007AFF",
          success: function (data) {
            let { tapIndex, index } = data;
            // tapIndex 第几个按钮
            // index 第几张图片
            //#ifdef APP-PLUS
            if (tapIndex == 0) {
              // 保存到相册
              plus.gallery.save(
                this.image,
                () => {
                  uni.showToast({
                    icon: "none",
                    title: "保存成功!",
                  });
                },
                () => {
                  uni.showToast({
                    icon: "none",
                    title: "保存失败!",
                  });
                }
              );
            } else {
              // 现将文件下载到本地
              uni.downloadFile({
                url: this.image,
                success: (args) => {
                  // 扫描二维码
                  plus.barcode.scan(
                    args.tempFilePath,
                    (code, url) => {
                      console.log(code, url);
                      // 如果识别成功
                      if (code == 0) {
                        // 打开扫描结果
                        plus.runtime.openURL(url);
                      }
                    },
                    (err) => {
                      uni.showToast({
                        icon: "none",
                        title: "图中没有可识别的二维码",
                      });
                      console.log(err, "err");
                    },
                    [plus.barcode.QR],
                    true
                  );
                },
                fail: () => {},
              });
            }
            //#endif
          },
        },
      });
    },
    getList() {
      let that = this;
      uni.showLoading({
        title: "加载中",
      });
      this.$myRequest
        .get("/api/mobile/public/getIncomeList", {
          userId: this.userInfo.id,
        })
        .then((res) => {
          this.list = res.incomeList;
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    aaa() {},
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  background: #fff;
}
.top {
  background: transparent;
  .title {
    // text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 36rpx;
    padding: 0 37rpx;
    text-align: center;
    font-size: 34rpx;
    color: #000;
  }

  .back {
    width: 40rpx;
    height: 40rpx;
  }
  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    bottom: 28rpx;
    left: 30rpx;
  }
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
.list {
  padding: 40rpx 30rpx;
  .scroll-view {
    height: 100%;
    .item {
      width: 100%;
      height: 180rpx;
      background: no-repeat;
      background-size: 100% 100%;
      margin-bottom: 40rpx;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 25rpx 30rpx;
      .nums {
        font-size: 60rpx;
        font-weight: bold;
        line-height: 1;
        padding-right: 30rpx;
        .unit {
          font-size: 28rpx;
        }
      }
      .line {
        height: 130rpx;
        border-right: 1rpx dashed #fff;
        margin-right: 23rpx;
      }
      .text_box {
        width: 250rpx;
        margin-right: 110rpx;
        .name {
          line-height: 40rpx;
          min-height: 80rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; //作为弹性伸缩盒子模型显示。
          -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
          -webkit-line-clamp: 2; //显示的行
          font-size: 28rpx;
          font-weight: 600;
          margin-bottom: 6rpx;
        }
        .date {
          font-size: 20rpx;
          line-height: 28rpx;
          color: #ffbdb7;
        }
      }
      .btn {
        width: 120rpx;
        height: 50rpx;
        background: #ffffff;
        border-radius: 8rpx;
        color: #ea3927;
        font-weight: bold;
        font-size: 26rpx;
      }
    }
    .item1 {
      opacity: 0.5;
    }
  }
}
.none {
  padding-top: 80rpx;
  text-align: center;
  color: #999999;
  font-size: 28rpx;
}
.mask1 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
}
.activity_box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 11;
  background: url(https://pic.bangbangtongcheng.com/c9ce722d153f4ab8a1a67fffcff04914.png)
    no-repeat;
  background-position: top center;
  background-size: 532rpx 373rpx;
  .activity_image {
    width: 532rpx;
    height: 373rpx;
    z-index: 9;
  }
  .success_window {
    width: 550rpx;
    height: 750rpx;
    background: linear-gradient(180deg, #ffffff 0%, #fffdee 100%);
    border-radius: 24rpx;
    border: 2rpx solid #fdded1;
    margin-top: 216rpx;
    z-index: 10;
    padding-top: 40rpx;
    // transform: translateY(-108rpx);
    .num_top {
      margin-bottom: 16rpx;
      align-items: center;
      .line_box {
        .line {
          width: 42rpx;
          height: 8rpx;
          background: linear-gradient(90deg, #c88f6b 1%, rgba(222, 193, 169, 0) 100%);
          border-radius: 3rpx 3rpx 3rpx 3rpx;
          margin-bottom: 5rpx;
          margin-left: 0;
        }
        .line1 {
          height: 6rpx;
          margin-left: 9rpx;
        }
        .line:last-child {
          margin-bottom: 0;
        }
      }
      .num_title {
        // width: 190rpx;
        text-align: center;
        font-size: 48rpx;
        font-weight: bold;
        color: #903e28;
        line-height: 67rpx;
        padding: 0 10rpx;
      }
      .line_box1 {
        .line {
          background: linear-gradient(270deg, #c88f6b 1%, rgba(222, 193, 169, 0) 100%);
          margin-left: 9rpx;
        }
        .line1 {
          height: 6rpx;
          margin-left: 0;
        }
      }
    }
    .success_top {
      width: 413rpx;
      height: 333rpx;
      margin-top: -180rpx;
      margin-bottom: 36rpx;
    }
    .success_title {
      line-height: 40rpx;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 10rpx;
      color: #7f7f7e;
    }
    .code {
      width: 272rpx;
      height: 80rpx;
      background: #fedca9;
      border-radius: 12rpx;
      font-weight: bold;
      color: #903e28;
      font-size: 32rpx;
      margin: 0 auto 10rpx;
    }
    .code_img {
      width: 280rpx;
      height: 280rpx;
      display: block;
      margin: 10rpx auto 16rpx;
    }
    .success_text {
      color: #fa4038;
      font-size: 24rpx;
      line-height: 34rpx;
      padding-top: 10rpx;
    }
    .success_btn {
      width: 424rpx;
      height: 88rpx;
      background: linear-gradient(270deg, #f68641 0%, #f4352c 100%);
      border-radius: 20rpx;
      margin: 0 auto;
      color: #fff;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
  .window_close {
    width: 64rpx;
    height: 64rpx;
  }
}
</style>
